03. Lesson Summary

To recap, lifecycle events are special methods that React provides that allow us to hook into different points in a component's life to run some code. Now, there are a number of different lifecycle events. They will run at different points, but we can break them down into three distinct categories:

Adding to the DOM

The following lifecycle events will be called in order when a component is being added to the DOM:

1. constructor()

• getDerivedStateFromProps()
• render()
• componentDidMount()

⚠️componentWillMount() has been deprecated. ⚠️

As of React 16.3, componentWillMount() has been replaced with UNSAFE_componentWillMount(). Only UNSAFE_componentWillMount() will work starting with React 17.0. UNSAFE_componentWillMount() is now considered to be a legacy method and should not be used in new code.

Re-rendering

The following lifecycle events will be called in order when a component is re-rendered to the DOM:

1. getDerivedStateFromProps()

• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()(specific use cases)
• componentDidUpdate()

⚠️componentWillReceiveProps() and componentWillUpdate() have been deprecated. ⚠️

As of React 16.3, they have been replaced with UNSAFE_componentWillUpdate() and UNSAFE_componentWillReceiveProps(). Only UNSAFE_componentWillUpdate() and UNSAFE_componentWillReceiveProps() will work starting with React 17.0. UNSAFE_componentWillUpdate() and UNSAFE_componentWillReceiveProps() are now considered to be legacy methods and should not be used in new code.

Removing from the DOM

This lifecycle event is called when a component is being removed from the DOM:

• componentWillUnmount()

Further Research

• componentDidMount() from the React Docs
• componentWillUnmount() from the React Docs
• Component Lifecycles from the React Docs

Lesson Challenge

Answer the following questions and share your answers with your classmates.

1) Describe what the code in the App.js file in the workspace below will render on the screen and explain why.

2) Describe a React anti-pattern that's used in the code.

3) Modify the Normal3 Component in order to keep it from re-rendering.